<template>
	<el-breadcrumb style="padding: 30px;">
		<el-breadcrumb-item>首页</el-breadcrumb-item>
		<el-breadcrumb-item>小程序数据</el-breadcrumb-item>
		<el-breadcrumb-item>数据一览</el-breadcrumb-item>
	</el-breadcrumb>
	<div>
		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="" style="margin-left: 15px;top:-5px;position: relative;">
				<el-select v-model="selectData" placeholder="请选择城市">
					<el-option label="全部城市" :value="''"></el-option>
					<el-option label="苏州" value="苏州"></el-option>
					<el-option label="郑州" value="郑州"></el-option>
					<el-option label="成都" value="成都"></el-option>
					<el-option label="西安" value="西安"></el-option>
					<el-option label="洛阳" value="洛阳"></el-option>
					<el-option label="合肥" value="合肥"></el-option>
					<el-option label="柳州" value="柳州"></el-option>
					<el-option label="济南" value="济南"></el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="" style="margin-left: 15px;top:-5px;position: relative;">
				<el-select v-model="type" placeholder="请选择车型">
					<el-option label="全部" :value="''"></el-option>
					<el-option label="s7" value="s7"></el-option>
					<el-option label="i-like" value="ilike"></el-option>
					<el-option label="i-onex" value="ionex"></el-option>
					<el-option label="i-onexP" value="ionexs"></el-option>

				</el-select>
			</el-form-item>
			<el-form-item label="" style="margin-left: 15px;top:-5px;position: relative;">
				<el-select v-model="sjstatus" placeholder="请选择状态">
					<el-option label="全部" :value="''"></el-option>
					<el-option label="已预约" value="4"></el-option>
					<el-option label="已核销" value="1"></el-option>
					<el-option label="已试驾" value="2"></el-option>
					<el-option label="已反馈" value="3"></el-option>


				</el-select>
			</el-form-item>
			<el-form-item label="" style="margin-left: 15px;top:-5px;position: relative;">
				<el-select v-model="jifen" placeholder="请选择积分">
					<el-option label="全部" :value="''"></el-option>
					<el-option label="0积分" value="0"></el-option>
					<el-option label="500积分" value="500"></el-option>
					<el-option label="1000积分" value="1000"></el-option>
					<el-option label="1500积分" value="1500"></el-option>
					<el-option label="2000积分" value="2000"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="" style="margin-left: 15px;top:-5px;position: relative;">
				<el-select v-model="cjtype" placeholder="请选择抽奖">
			  <el-option label="清除" :value="null"></el-option>
					<el-option label="全部" value="0"></el-option>
					<el-option label="第一期" value="1"></el-option>
					<el-option label="第二期" value="2"></el-option>
					<el-option label="第三期" value="3"></el-option>

				</el-select>
			</el-form-item>
			<el-form-item v-show="selectData||type||jifen" label="" style="margin-left: 15px">
				{{selectData?selectData+'门店':''}}{{typename[type]}}{{jifen?jifen+'积分':''}} 参与人数:{{dataf||0}}
			</el-form-item>
			<el-form-item label="" style="margin-left: 15px">
				参与总人数:{{token||0}}
			</el-form-item>
			<el-form-item>
				<el-button style="top:-5px;position: relative;" @click="rankshow=true" type="primary">查看排行榜</el-button>
			</el-form-item>
		</el-form>
		<el-table  v-show="cjtype===null" class="mb20" :data="tableData" border style="width: 100%">

			


				<el-table-column prop="num" label="序号">

				</el-table-column>
				<el-table-column prop="numbers" label="试驾人手机号码" width="120" />
				<el-table-column prop="name" label="试驾人姓名" />
				<el-table-column prop="type" label="试驾车型" />
				<el-table-column prop="city" label="城市" />
				<el-table-column prop="jifen" label="积分" />
				<el-table-column prop="createtime" label="预约时间" width="160">
					<template #default="scope">
						{{ dayjs(scope.row.createtime*1000).format('YYYY-MM-DD HH:mm') }}
					</template>
				</el-table-column>
				<el-table-column prop="status" label="试驾反馈" width="220">
					<template #default="scope">
						<!-- {{ scope.row.cpsseven ? scope.row.cpsseven : scope.row.cpilike }} -->
						<el-button size="mini" type="primary" @click="views({row:scope.row,index:scope.$index})">查看反馈详情
						</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="签到状态">
					<template #default="scope">
						<el-tag :type="scope.row.wdhx==1?'success':''" effect="dark">
							{{ scope.row.wdhx==1 ? "已签到核销" : "未签到核销" }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="活动类型">
					<template #default="scope">
						<el-tag :type="scope.row.cords==1?'success':'danger'" effect="dark">
							{{ scope.row.cords==1 ? "全国" : "门店" }}
						</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="sjnumbers" label="操作人号码" />
				<el-table-column prop="beizu" label="备注" />
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="mini" type="danger" @click="removeModal({row:scope.row,index:scope.$index})">删除
						</el-button>
						<el-button size="mini" type="primary" @click="editmsg({row:scope.row,index:scope.$index})">修改备注
						</el-button>
					</template>
				</el-table-column>
			

			

		</el-table>
		
		<el-table  v-show="cjtype!==null" class="mb20" :data="tableData" border style="width: 100%">
			<el-table-column prop="numbers" label="手机号码" width="120" />
			<el-table-column prop="name" label="姓名" width="120" />
			<el-table-column prop="img" label="头像" width="100">
				<template #default="scope">
					<el-image style="width: 100px; height: 100px" :src="scope.row.headurl"
						:preview-src-list="[scope.row.headurl]">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态">
				<template #default="scope">
					<el-tag :type="scope.row.zjorders==1?'success':''" effect="dark">
						{{ scope.row.zjorders==1 ? "已中奖" : "未中奖" }}
					</el-tag>
				</template>
			</el-table-column>
		</el-table>
		
		<el-dialog v-model="msgshow" title="备注">
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item label="">
					<el-input v-model="beizu" autocomplete="off"></el-input>
				</el-form-item>


				<el-form-item>
					<el-button @click="msgsubmit" type="primary">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog v-model="rankshow" title="排行榜">
			<el-table class="mb20" :data="tableData" border style="width: 100%">
				<el-table-column prop="numbers" label="试驾人手机号码" />
				<el-table-column prop="name" label="试驾人姓名" />
				<el-table-column prop="type" label="试驾车型" />
				<el-table-column prop="city" label="城市" />
				<el-table-column prop="jifen" label="积分" />

			</el-table>
		</el-dialog>
		<el-dialog v-model="rankshows" title="反馈">
			<el-descriptions v-if="viewdata&&viewdata.cpsseven" title="s7反馈">

				<el-descriptions-item v-for="t in viewdata.cpsseven.split(',')" label="">{{t}}</el-descriptions-item>

			</el-descriptions>
			<el-descriptions v-if="viewdata&&viewdata.cpilike" title="ilike反馈">

				<el-descriptions-item v-for="t in viewdata.cpilike.split(',')" label="">{{t}}</el-descriptions-item>

			</el-descriptions>
			<el-descriptions v-if="viewdata&&viewdata.cpionex" title="ionex反馈">

				<el-descriptions-item v-for="t in viewdata.cpionex.split(',')" label="">{{t}}</el-descriptions-item>

			</el-descriptions>
			<el-descriptions v-if="viewdata&&viewdata.cponexs" title="ionexP反馈">

				<el-descriptions-item v-for="t in viewdata.cponexs.split(',')" label="">{{t}}</el-descriptions-item>

			</el-descriptions>
		</el-dialog>
		<el-pagination class="mt20" v-model:currentPage="page" @current-change="getData" :page-size="10" background
			layout="prev, pager, next" :total="total">
		</el-pagination>
	</div>
</template>

<script>
	import dayjs from "dayjs";
	import {
		ElMessageBox,
		ElMessage
	} from "element-plus";
	export default {
		components: {},
		watch: {
			selectData(){
				this.cjtype=null;
				this.getData()
			},
			cjtype() {
				this.getData()
			},
			times() {
				this.cjtype=null;
				this.form.starttime = this.times[0];
				this.form.endtime = this.times[1];
			},
			type() {
				this.cjtype=null;
				this.page = 1;
				this.getData();
			},
			jifen() {
				this.cjtype=null;
				this.page = 1;
				this.getData();
			},
			sjstatus() {
				this.cjtype=null;
				if (this.sjstatus == '') {
					this.wdhx = '';
					this.ishexiao = "";
					this.fk = "";
				}
				if (this.sjstatus == 1) {
					this.wdhx = 1;
			 	this.ishexiao = "";
			 	this.fk = "";
				}
				if (this.sjstatus == 2) {
					this.wdhx = "";
					this.ishexiao = 2;
					this.fk = "";
				}
				if (this.sjstatus == 3) {
			 	this.wdhx = "";
			 	this.ishexiao = "";
					this.fk = 3;
				}
				if (this.sjstatus == 4) {
					this.wdhx = 0;
					this.ishexiao = "";
					this.fk = "";
				}
				this.page = 1;
				this.getData()
			}
		},
		data() {
			return {
				cjtype: null,
				jifen: null,
				msgshow: false,
				typename: {
					"s7": 's7',
					"ilike": "i-like",
					"ionex": "i-onex",
					"ionexs": "i-onexP"

				},
				dayjs,
				dataf: 0,
				token: 0,
				rankshows: false,
				rankshow: false,
				beizu: "",
				status: {
					0: "审核中",
					1: "正常",
					2: "隐藏",
					3: "不通过",
				},
				type: null,
				sjstatus: null,
				wdhx: "", //   已核销 
				ishexiao: "", // 已试驾
				fk: "", //已反馈
				viewarr: [],
				modalStatewins: false,
				hdqtxmname: "", //     名称
				hdjifen: "", //   加积分
				numbers: "", //  手机
				modalStatewin: false,
				qrcode: null,
				modalStatecode: false,
				vtimes: ["", ""],
				formLabelWidth: "120px",
				times: "",
				form: {
					is_show: "1",
					images: "",
					content: "",
					jifen: "",
					starttime: "",
					endtime: "",
					title: "",
					is_hot: "0",
					author: "0",
				},
				tableData: [],
				rules: {
					title: [{
						required: true,
						message: "请填写标题",
						trigger: "blur",
					}, ],
					jifen: [{
						required: true,
						message: "请填写积分",
						trigger: "blur",
					}, ],
					content: [{
						required: true,
						message: "请填写内容",
						trigger: "blur",
					}, ],
					starttime: [{
						required: true,
						message: "请选择时间",
						trigger: "change",
					}, ],
				},
				pid: [],
				bqlist: [],
				viewdata: "",
			};
		},
		async mounted() {
			// await this.$http.post("index.php/index/Admins/bqlist").then((data) => {
			//   this.bqlist = data;
			// });
			await this.getData();
		},
		methods: {
			views(data) {
				console.log(data);
				this.viewdata = data.row;
				this.rankshows = true;
			},
			getDatas() {
				this.page = 1;
				this.getData()
			},
			msgsubmit() {
				this.$http
					.post("/index.php/index/goodses/beizu", {
						beizu: this.beizu,
						id: this.id
					}).then(() => {
						this.beizu = "";
						ElMessage({
			 			message: "编辑成功",
							type: "success",
						});
						this.msgshow = false;
						this.getData();
					})
			},
			getData() {
				this.$http
					.post(this.cjtype === null ? "/index.php/index/goodses/sjxcxlists" :
					'/index.php/index/index/cjoneqi', {
						page: this.page,
						pagesize: 10,
						city: this.selectData,
						names: this.keywords,
						wdhx: this.wdhx,
						ishexiao: this.ishexiao,
						fk: this.fk,
						type: this.type,
						jifen: this.jifen,
		 			cjtype: this.cjtype
					})
					.then((datas) => {
						console.log(datas.data.data,2222)
						this.dataf = datas.data.total;
						this.token = datas.data.totalz;
						this.total = datas.data.total;
						datas.data.data.forEach((t, i) => {
							if (t.type == "ionexs") {
								t.type = "ionexp"
							}
							t.num = (this.page - 1) * 10 + 1 + i
						})
						this.tableData = datas.data.data;
						// if(datas.length>0){
						// var data = datas[0];
						// this.tableData = data;
						// this.total = datas[1];
						// }else{
						//   this.tableData = [];
						//    this.total = 0;
						// }

					});
			},
			submit(ref) {
				console.log(this.$refs);
				this.doRules(this.$refs[ref]).then(() => {
					if (this.id) this.form.id = this.id;

					this.$http
						.post(
							this.id ?
							"/index.php/index/Userinfo/hdedittj" :
							"/index.php/index/Userinfo/hdadd",
							this.form
						)
						.then((data) => {
							console.log(data);
							this.modalState = false;
							ElMessage({
								message: this.id ? "编辑成功" : "新增成功",
								type: "success",
							});
							this.getData();
						});
				});
			},
			editmsg(data) {
				this.beizu = data.row.beizu;
				this.id = data.row.id;
				this.msgshow = true;
			},
			remove(data) {
				this.$http
					.post("/index.php/index/goodses/sjxcxdel", {
						id: data.row.id
					})
					.then((data) => {
						ElMessage({
							message: "删除成功",
							type: "success",
						});
						this.getData();
					});
			},
			handleAvatarSuccess(file) {
				this.form.image = file.data;
			},
		},
	};
</script>
